<template>
  <div class="page-bg an-order">
    <van-nav-bar
      title="确认订单"
      left-text
      right-text
      left-arrow
      :fixed="true"
      @click-left="clickBack"
    />

    <div class="an-address">
      <van-icon class="an-ico" name="location-o" size="25" />
      <div v-if="addressInfo" @click="clickAddress">
        <div>{{addressInfo.name}} {{addressInfo.tel}}</div>
        <div>{{addressInfo.address}}</div>
      </div>
      <div v-else @click="addAddress">添加收获地址</div>
    </div>

    <div class="an-pad">
      <div class="an-box" v-for="item in cart" :key="item.id">
        <van-card
          :num="item.goodsNum"
          :price="item.goodsPrice"
          :title="item.goods.name"
          :thumb="item.goods.image"
        >
          <template #tags v-if="item.standardID">
            <div class="an-subtitle">{{item.standardName}}</div>
          </template>
        </van-card>
      </div>

      <van-cell title="运费" style="margin-bottom:10px">
        <template #default>
          <span class="custom-title">
            ￥
            <strong>{{freight}}</strong>
          </span>
        </template>
      </van-cell>

      <van-field
        v-model="message"
        rows="1"
        autosize
        :maxlength="200"
        label="备注"
        type="textarea"
        placeholder="请输入备注"
      />
    </div>

    <van-submit-bar
      :price="totalPrice*100"
      :disabled="addressInfo==null"
      button-text="提交订单"
      @submit="onSubmit"
    />
  </div>
</template>

<script>
export default {
  props: {
    prom: {
      // 商品信息
      type: String,
      default: "",
    },
  },
  data() {
    return {
      addressInfo: {}, // 收货信息
      cart: [],
      province: "", // 收货地址所在省
      freight: 0, // 运费
      totalPrice: 0, // 总价
      goodsArray: [], // 便于提交订单的商品数据
      cartIDS: "", // 商品ID
      message: "", // 订单备注
    };
  },
  created() {
    this.anLoad();
    this.getAddress();
  },
  methods: {
    // 初始化
    anLoad() {
      let nd = JSON.parse(decodeURI(this.prom));
      this.cart = nd;
    },

    // 获取默认地址
    getAddress() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner",
      });
      this.$store.dispatch("getDefaultAddress").then((res) => {
        this.$toast.clear();
        this.addressInfo = res;
        if (res) {
          this.province = res.address.split("/")[0];
          this.addressInfo.address = res.address.replace(/\//g, "");
          this.getFreight();
        }
      });
    },

    // 查询运费
    getFreight() {
      this.$api.getFreight().then((res) => {
        // 计算运费
        let bas = 0,
          price,
          defPrice,
          total = 0,
          goodsArray = [],
          ids = [];
        this.cart.forEach((item) => {
          let freightBase = item.goods.freightBase;
          if (freightBase) {
            // 运费基数*商品数量  小数精度保留2位  *100
            bas = bas + freightBase * item.goodsNum * 100;
          }
          // 计算总价
          total = total + parseFloat(item.goodsPrice) * item.goodsNum * 100;
          // 规范商品数据格式 用于提交
          goodsArray.push({
            goodsID: item.goodsID,
            goodsNum: item.goodsNum,
            money: item.goodsPrice,
            goodsStandard: item.standardName,
          });
          ids.push(item.id);
        });
        res.forEach((item) => {
          if (this.province == item.province) {
            price = item.freight;
          }
          if (item.province == "default") {
            defPrice = item.freight;
          }
        });
        try {
          // 运费 = 运费基数向上取整 * 单位运费
          this.freight = Math.ceil(bas / 100) * (price ? price : defPrice);
        } catch (e) {
          console.log(e);
        }
        this.totalPrice = total / 100 + this.freight;
        this.goodsArray = goodsArray;
        this.cartIDS = ids.toString();
      });
    },

    // 提交订单
    onSubmit() {
      let nd = {
        userID: this.$store.state.userInfo.id,
        consignee: this.addressInfo.name,
        address: this.addressInfo.address,
        phone: this.addressInfo.tel,
        totalMoney: this.totalPrice,
        freight: this.freight,
        state: 1000, // 待付款
        goodsJSON: JSON.stringify(this.goodsArray),
        customerNotes: this.message, // 备注
      };
      this.$api.orderAdd(nd).then((res) => {
        // 删除 购物车中已下单的商品
        this.$api.deleteCart(this.cartIDS);
        // 跳转至订单详情界面
        this.$router.push({ path: "/orderInfo", query: { id: res } });
      });
    },

    // 选择收货地址
    clickAddress() {
      this.$router.push({ path: "/address", query: { flag: 2 } });
    },

    // 新增添加收货地址
    addAddress() {
      this.$router.push({ path: "/address", query: { flag: 1 } });
    },

    clickBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss">
.an-order {
  .van-card {
    background-color: #ffffff;
  }
  .van-card__title {
    padding-top: 10px;
    font-size: 16px;
  }
}
</style>
<style lang="scss" scoped>
@import "../../css/mixin.scss";
.an-order {
  padding-top: 46px;
  .an-address {
    padding: 15px;
    background-color: #ffffff;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    position: relative;
    .an-ico {
      margin-right: 10px;
    }
    &::before {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      height: 2px;
      background: -webkit-repeating-linear-gradient(
        135deg,
        #ff6c6c 0,
        #ff6c6c 20%,
        transparent 0,
        transparent 25%,
        #1989fa 0,
        #1989fa 45%,
        transparent 0,
        transparent 50%
      );
      background: repeating-linear-gradient(
        -45deg,
        #ff6c6c 0,
        #ff6c6c 20%,
        transparent 0,
        transparent 25%,
        #1989fa 0,
        #1989fa 45%,
        transparent 0,
        transparent 50%
      );
      background-size: 80px;
      content: "";
    }
  }
  .an-pad {
    padding: 0 10px 60px 10px;
  }
  .an-box {
    margin-bottom: 10px;
    background-color: #ffffff;
  }
  .an-subtitle {
    color: $gray-6;
    padding: 5px 0;
  }
  .custom-title {
    color: $red;
    strong {
      font-size: 16px;
    }
  }
}
</style>